@import '@/assets/styles/var.less';

// 轮播图
.swipers-container {
    height: 184px;
    overflow: hidden;
    border-radius: 0 0 48px 0;
    img {
        width: 100%;
        height: 100%;
    }
}

// 店铺信息
.shop-info-container {
    border-radius: 24px 0 0 0;
    margin-top: -28px;
    padding: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    & > span:nth-child(1) {
        font-size: 18px;
        font-weight: 700;
    } // 该选择器代表span的第一个子元素
    .score-container {
        font-size: 14px;
        color: #999;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 8px;
    }
    .business-time-container {
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 8px;
        font-size: 14px;
        span:nth-child(1) {
            font-weight: bold;
        }
        span:nth-child(2) {
            color: #999;
        }
    }

    .address-container {
        font-size: 14px;
        color: #999;
        .address-info {
            gap: 8px;
            span:nth-child(1) {
                color: #333;
                font-weight: 700;
                max-width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .address-icon {
            align-items: center;
            justify-content: center;
            gap: 8px;
            .icon-item {
                gap: 4px;
                align-items: center;
                justify-content: center;
            }
        }
    }
}

// 服务信息
.card-container {
    margin-bottom: 16px;
    align-items: center;
    justify-content: space-between;

    & > img {
        width: 100px;
        height: 80px;
        border-radius: 8px;
    }
    .card-info {
        height: 80px;
        justify-content: space-between;
        .card-info-title {
            span {
                font-size: 16px;
                color: rgb(51, 51, 51);
                font-weight: 600;
            }
        }

        & > span:nth-child(2) {
            font-size: 11px;
            color: rgb(138, 138, 138);
        } // 代表.card-info的第二个子元素,> 代表直接子元素
        .card-info-price {
            align-items: end;
            color: rgb(255, 93, 102);
            font-weight: 800;
            span:nth-child(1) {
                font-size: 16px;
                &::after {
                    content: '元';
                    font-size: 12px;
                }
            }
            span:not(:nth-child(1)) {
                font-size: 12px;
            }
            .time-container {
                width: 80px;
                gap: 4px;
                margin-left: 8px;
                img {
                    width: 14px;
                    height: 14px;
                }
                span {
                    font-weight: normal;
                    color: #8a8a8a;
                    font-size: 12px;
                }
            }
        }
    }
}
